
<!-- import 'NavMenu' from './NavMenu.vue'; -->
<script setup>
import { ref } from 'vue';
import NavMenu from './NavMenu.vue';
import heder from './heder.vue';
import { useRouter } from 'vue-router';
import { removeToken } from '../../utils/auth';
import { mainStore } from '../../store';
// import farmerlist from '../table/farmerlist.vue'
const router = useRouter();

function quit() {
  router.push('/login');
  removeToken();
  mainStore().$reset()
  console.log('退出');

}
</script>

<template>
  <div class="common-layout">
    <el-container>

      <el-header class="fixed-header">
        <heder></heder>
      </el-header>
    <!-- 左侧菜单  -->
    <el-container> <NavMenu></NavMenu>

   
         <!-- 头部 --> 
   
    
             <!-- 主体内容 -->
        <el-main style="left: 200px;">
        
        <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 设置较高的 z-index，确保头部始终位于顶部 */
  background-color: #fff; /* 保持与主题背景色一致，或根据需求自定义 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果，可选 */
}
.el-main {
  margin-top: 64px; /* 该值应与头部的实际高度相匹配 */
  margin-left: 200px;
}
</style>